<template>
  <!-- 会员列表 -->
  <ContentWrap
    v-loading="loading"
    :bodyStyle="{ height: '100%', paddingLeft: '5px', paddingRight: '5px' }"
    class="!h-full"
  >
    <el-scrollbar view-class="scrollbarClass">
      <div class="h-full flex flex-col justify-between" v-if="list.length > 0">
        <!-- 列表 -->
        <el-row :gutter="10" class="m-x-0!">
          <el-col
            :xs="24"
            :sm="24"
            :md="24"
            :lg="8"
            :xl="6"
            v-for="(userItem, index) in list"
            :key="index"
          >
            <UserCard :user="userItem" @click="setUserInfo(userItem)"
          /></el-col>
        </el-row>
        <!-- 分页 -->

        <div>
          <Pagination
            v-model:limit="queryParams.pageSize"
            v-model:page="queryParams.pageNo"
            :total="total"
            @pagination="shopMemberListStore.search"
          />
        </div>
      </div>
      <div class="h-full flex flex-col justify-center" v-if="list.length == 0">
        <Empty />
      </div>
    </el-scrollbar>
  </ContentWrap>
</template>
<script lang="ts" setup>
import UserCard from './components/UserCard.vue'
/** 门店会员列表查询 */
import { useShopMemberListStoreWithOut } from '@/store/modules/shop/memberList'
import { storeToRefs } from 'pinia'
const shopMemberListStore = useShopMemberListStoreWithOut()
const { queryParams } = storeToRefs(shopMemberListStore)

const list = computed(() => {
  return shopMemberListStore.getList
})
const total = computed(() => {
  return shopMemberListStore.getTotal
})
const loading = computed(() => {
  return shopMemberListStore.getLoading
})

/** 门店会员信息 */
import { useShopUserStoreWithOut } from '@/store/modules/shop/user'
const shopUserStore = useShopUserStoreWithOut()

defineOptions({ name: 'MemberList' })

/** 选择会员 */
const setUserInfo = (user: any) => {
  shopUserStore.setUserInfoAction(user)
  shopMemberListStore.resetState()
}
</script>
<style lang="scss">
.scrollbarClass {
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: flex-end;
}
</style>
